// 权限控制
// 权限拦截在路由跳转 导航守卫
// 1.前置守卫
// next是前置守卫必须执行的钩子 next必须执行 如果不执行 页面就不会动
// next()放过
// next(false)跳转终止
// next(地址) 跳转到某个地址
// 2.引入store实列和组件的this.$store是一样的
// 3.判断state里面有没有token
// 3.1如果有token&&需要在登录页---跳到主页
// 3.2如果有token不在登录页---正常放过通过
// 4.否则就是没有token需要建立一份白名单(就算不需要任何权限都可以访问的)
// 4.1查看白名单要跳转的地址里面有包含-如果有就正常通行否则跳到主页
// 如果没有token并且不在白名单就跳转到登录页
// bug：当页面要跳转的路由和实际跳转的路由不一致时，后置守卫会失效。但前置守卫是生效的，所以导致了进度条开启后，无法结束的问题。
// 所以需要在发生上述情况的路由跳转的时候，手动结束结束进度条。
// 路由守卫钩子函数都是成对出现的,如果前置路由前进方向突然改变跳转路径，这样后置路由会失效九关闭不来进度条
import router from './router'
import store from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const whiteList = ['/login', '/404']
router.beforeEach((to, form, next) => {
  NProgress.start() // 路由开始跳转前，开启进度条
  if (store.getters.token) {
    if (to.path === '/login') {
      next('/')
    } else {
      // 5.只有有token的情况下，才去获取用户资料&&不在登录页而是进入登录之后再去获取用户资料
      // 如果每次切换一个页面都去获取一次过于冗余--解决方案
      // 如果当前vuex中有用户得资料id表示已经获取过资料不需要再次获取如果没有id才需要去获取
      // 因为actions属于异地需要等待执行完成再去执行下面的代码
      if (!store.getters.userId) {
        store.dispatch('user/fetchUserInfo')
      }

      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  NProgress.done()
})
router.afterEach((to, form) => {
  NProgress.done()// 路由进入页面结束进度条
})
